<template>
  <div>
    <div class="title">全球疫情地图</div>
    <van-tabs v-model="active" animated @change="change(active)">
      <van-tab title="现存确诊">
        <div id="main" :style="{ width: '7.5rem', height: '7rem' }"></div>
      </van-tab>
      <van-tab title="累计确诊">
        <div id="worldMain" :style="{ width: '7.5rem', height: '7rem' }"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import api from "@/api/index.js";
export default {
  name: "WorldMap",
  data() {
    return {
      active: 0,
      worldData: [],
    };
  },
  methods: {
    change(title) {
      if (title === 1) {
        this.$nextTick(() => {
          this.$myChart.worldMap("worldMain", this.worldData);
        });
      }
    },
  },
  mounted() {
    //获取数据
    api.getWorldData().then(({ data: res }) => {
      if (res.codeid !== 10000) return console.log("数据获取失败");
      let now = [];
      for (const item of res.retdata) {
        this.worldData.push({ name: item.xArea, value: item.confirm });
        now.push({ name: item.xArea, value: item.curConfirm });
      }
      this.$nextTick(() => {
        //这是现存地图
        this.$myChart.worldMap("main", now);
      });
    });
  },
};
</script>

<style lang="less" scoped>
.title {
  border-left: 0.1rem solid #4169e2;
  margin: 0.3rem 0.3rem 0.2rem;
  padding: 0.08rem 0.1rem;
  font-size: 0.34rem;
}
#main,
#worldMain {
  margin: 0 auto;
  margin-bottom: 0.2rem;
  background-color: #f7f7f7;
}
</style>